<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../application/vue.js"></script>
    <style>
        body{
            margin-bottom:500px;
        }
        ul{
            list-style-type:none;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(value,index) in arr" :key="index">{{index | addPre()}}:{{value}}</li>
        </ul>
        <hr>
        <p>美元：{{num | fc('$')}}</p>
        <p>人民币:{{num | fc('￥')}}</p>
        <hr>
        <p>现在日期:{{date}}</p>
        <p>{{date | timeFormat()}}</p>
        <p>{{date | timeFormat("y年m月d日 h时M分s秒")}}</p>
        <p>{{ms | timeFormat()}}</p>
        <hr>
        <p>{{date | aaa()}}</p>
        <p>{{date | formatTime("y年m月d日 h时M分s秒")}}</p>
        <p>{{date | formatTime("y年m月d日")}}</p>
    </div>
</body>
<script>
    Vue.filter("aaa",function(){
        console.log("aaaa");
    });
    Vue.filter("formatTime",function(date,arg1){
        if(!(date instanceof Date) && typeof date =="number"){
            date=new Date(date);
        }else if(!(date instanceof Date)){
            return date;
        }
        let y=date.getFullYear();
        let m=(date.getMonth()+1)>=10?(date.getMonth()+1):"0"+(date.getMonth()+1);
        let d=date.getDate()>=10?date.getDate():"0"+date.getDate();
        let h=date.getHours()>=10?date.getHours():"0"+date.getHours();
        let M=date.getMinutes()>=10?date.getMinutes():"0"+date.getMinutes();
        let s=date.getSeconds()>=10?date.getSeconds():"0"+date.getSeconds();
        if(!arg1){
            return y+"年"+m+"月"+d+"日"+" "+h+":"+M+":"+s;
        }
        arg1=arg1.replace("y",y);
        arg1=arg1.replace("m",m);
        arg1=arg1.replace("d",d);
        arg1=arg1.replace("h",h);
        arg1=arg1.replace("M",M);
        arg1=arg1.replace("s",s);
        return arg1;
    })
    new Vue({
        el:"#app",
        data:{
            arr:["上海","南京","苏州","镇江","甘肃","上海","南京","苏州","镇江","甘肃","上海","南京","苏州","镇江","甘肃"],
            num:100,
            date:new Date(),
            ms:1568619400557
        },
        filters:{
            addPre(index){
                return index>=10?index:"0"+index;
            },
            fc(num,arg){
                return arg+num;
            },
            timeFormat(date,arg1){
                if(!(date instanceof Date) && typeof date =="number"){
                    date=new Date(date);
                }else if(!(date instanceof Date)){
                    return date;
                }
                let y=date.getFullYear();
                let m=(date.getMonth()+1)>=10?(date.getMonth()+1):"0"+(date.getMonth()+1);
                let d=date.getDate()>=10?date.getDate():"0"+date.getDate();
                let h=date.getHours()>=10?date.getHours():"0"+date.getHours();
                let M=date.getMinutes()>=10?date.getMinutes():"0"+date.getMinutes();
                let s=date.getSeconds()>=10?date.getSeconds():"0"+date.getSeconds();
                if(!arg1){
                    return y+"年"+m+"月"+d+"日"+" "+h+":"+M+":"+s;
                }
                arg1=arg1.replace("y",y);
                arg1=arg1.replace("m",m);
                arg1=arg1.replace("d",d);
                arg1=arg1.replace("h",h);
                arg1=arg1.replace("M",M);
                arg1=arg1.replace("s",s);
                return arg1;
            }
        }
    })
</script>
</html>